<template>
    <el-table :data="tableData" stripe @sort-change="sort">
        <el-table-column prop="remark" label="错误信息"></el-table-column>
        <el-table-column prop="question" label="题目"></el-table-column>
        <el-table-column prop="optionA" label="A"></el-table-column>
        <el-table-column prop="optionB" label="B"></el-table-column>
        <el-table-column prop="answerOption" label="答案"></el-table-column>
        <el-table-column prop="creationDate" sortable="custom" label="创建时间"></el-table-column>
        <el-table-column fixed="right" label="操作" width="280">
            <template #default="scope">
                <el-button size="small" type="danger" @click="handleCorrect(scope.row)">
                    已修正
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus'
import axios from 'axios';
const pageSizes = ref([10, 25, 50, 100])
const pageSize = ref(pageSizes.value[0]);
const tableData = ref([])
const ids = ref([])
const total = ref(0)
const currentPage = ref(1)
onMounted(() => {
    getList(currentPage.value, pageSize.value)
})
const getList = async (currentPage, pageSize) => {
    var res = await axios.get(`/knowledge/wrong/list?page=${currentPage}&size=${pageSize}`)
    if (res.data.code === 200) {
        tableData.value = res.data.data.records
        total.value = res.data.data.total
    } else {
        ElMessage.error(res.data.msg)
    }
}

const handleSizeChange = () => {
    currentPage.value = 1;
    getList(currentPage.value, pageSize.value)
}

const handleCurrentChange = () => {
    getList(currentPage.value, pageSize.value)
}

const handleCorrect = async (item) => {
    var res = await axios.delete(`/knowledge/wrong/correct/${item.id}`)
    if (res.data.code === 200) {
        ElMessage.success("操作成功")
        getList(currentPage.value, pageSize.value)
    } else {
        ElMessage.error(res.data.msg)
    }
}

const sort = (column) => {
    console.log(column)
    console.log(column.prop)
    console.log(column.order)
}

</script>